<template>
  <el-card>
    <template #header>
      <div>ready【useRequest】</div>
    </template>
    <div>ready: {{ ready }}</div>
    <el-button style="margin-top: 16px" @click="() => toggle()">
      changeReady
    </el-button>
    <div style="margin-top: 16px">{{ data }}</div>
  </el-card>
</template>

<script setup>
  import { useRequest, useToggle } from "vue-hooks-plus";

  function getUsername() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(String(Date.now()));
      }, 1000);
    });
  }
  const [ready, { toggle }] = useToggle(false);

  const { data } = useRequest(() => getUsername(), {
    ready,
  });
</script>
